<template>
  <div class="timeline-point">
    <div class="slider-demo-block">
      <!-- 播放/暂停 -->
      <div class="play-pause">
        <el-icon v-show="!isPlaying" class="play-icon" @click="startPlayback">
          <VideoPlay />
        </el-icon>
        <el-icon v-show="isPlaying" class="pause-icon" @click="pausePlayback">
          <VideoPause />
        </el-icon>
      </div>
      <!-- 后退 -->
      <div class="back" @click="stepBackward">
        <el-icon><ArrowLeftBold /></el-icon>
      </div>
      <el-slider
        v-model="currentIndex"
        :marks="marks"
        :show-tooltip="false"
        :min="0"
        :max="timePoints.length - 1"
        :step="1"
        @change="handleSliderChange"
      />
      <!-- 前进 -->
      <div class="forward" @click="stepForward">
        <el-icon><ArrowRightBold /></el-icon>
      </div>
    </div>
    <div class="timeline-point__label">
      <span>{{ formatTime(startTime) }}</span>
      <span>{{ formatTime(endTime) }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onBeforeUnmount } from "vue";
import type { CSSProperties } from "vue";

interface Mark {
  style: CSSProperties;
  label: string;
}

const isPlaying = ref(false);
const playbackInterval = ref<NodeJS.Timeout | null>(null);
const currentIndex = ref(0);
const playbackSpeed = 800; // 播放速度(ms)

// 时间范围设置
const startTime = new Date(2025, 3, 15, 8, 0);
const endTime = new Date(2025, 3, 15, 9, 0);

// 生成6分钟间隔的时间点
const timePoints = computed(() => {
  const points = [];
  let current = new Date(startTime);

  while (current <= endTime) {
    points.push(new Date(current));
    current = new Date(current.getTime() + 6 * 60000); // 增加6分钟
  }
  return points;
});

// 生成滑块标记
const marks = computed(() => {
  const markObj: Record<number, Mark | string> = {};
  const interval = Math.max(1, Math.floor(timePoints.value.length / 10));

  timePoints.value.forEach((time, index) => {
    // 只显示部分标记避免拥挤
    if (index % interval === 0 || index === 0 || index === timePoints.value.length - 1) {
      markObj[index] = {
        style: { color: "#1989FA" },
        label: formatShortTime(time)
      };
    }
  });

  return markObj;
});

const formatTime = (date: Date) => {
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${hours}:${minutes}`;
};

const formatShortTime = (date: Date) => {
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  return `${hours}:${minutes}`;
};

const startPlayback = () => {
  if (currentIndex.value >= timePoints.value.length - 1) {
    currentIndex.value = 0; // 如果到末尾则回到起点
  }

  isPlaying.value = true;

  // 清除现有定时器
  if (playbackInterval.value) {
    clearInterval(playbackInterval.value);
  }

  playbackInterval.value = setInterval(() => {
    if (currentIndex.value < timePoints.value.length - 1) {
      currentIndex.value += 1;
    } else {
      pausePlayback(); // 到达末尾时停止
    }
  }, playbackSpeed);
};

const pausePlayback = () => {
  isPlaying.value = false;
  if (playbackInterval.value) {
    clearInterval(playbackInterval.value);
    playbackInterval.value = null;
  }
};

const stepForward = () => {
  pausePlayback();
  currentIndex.value = Math.min(currentIndex.value + 1, timePoints.value.length - 1);
};

const stepBackward = () => {
  pausePlayback();
  currentIndex.value = Math.max(currentIndex.value - 1, 0);
};

const handleSliderChange = (value: number) => {
  console.log(value);

  pausePlayback();
};

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  pausePlayback();
});
</script>

<style scoped lang="scss">
@use "./index";
</style>
